<template>
    <view>
        <status-bar :title="Shop.name" back="0"></status-bar>
        <map
            style="width: 730rpx; height: 740rpx"
            :latitude="Shop.pointy"
            :longitude="Shop.pointx"
            class="Map"
            :markers="covers"></map>

        <view class="Info">
            <view class="list size36 black bold">{{ Shop.name }}</view>
            <view class="list color_66" @click.stop="$common.Tel(Shop.tel)"
                >电话：{{ Shop.tel }}</view
            >
            <view class="list color_66">地址：{{ Shop.address }}</view>
        </view>

        <view class="toBtn" @click="openLocat">导航</view>
        <tabBar :tab="37551"></tabBar>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                id: 0,
                covers: [
                    {
                        id: 0,
                        width: 32,
                        height: 32,
                        latitude: 39.909,
                        longitude: 116.39742,
                        iconPath: '../static/imgs/pos.png',
                    },
                ],
                Shop: '',
            };
        },

        onShow() {
            const Shop = this.config_shop.find((n) => n.config_shop_id == this.config_shop_id);
            this.Shop = Shop;
            console.log(Shop, 'Shop');
            this.covers[0].latitude = Number.parseFloat(Shop.pointy);
            this.covers[0].longitude = Number.parseFloat(Shop.pointx);
            console.log(this.covers[0], ' this.covers[0]');
        },
        methods: {
            openLocat() {
                uni.openLocation({
                    latitude: Number.parseFloat(this.Shop.pointy),
                    longitude: Number.parseFloat(this.Shop.pointx),
                    name: this.Shop.name,
                    address: this.Shop.address,
                    success() {
                        console.log('打开成功');
                    },
                    fail(err) {
                        console.log(err);
                        uni.showToast({
                            title: '打开失败!',
                            icon: 'none',
                        });
                    },
                });
            },
        },
        computed: {
            ...mapState([
                'color',
                'totalHeight',
                'tabTitle',
                'vid',
                'share',
                'startUp',
                'config_shop',
                'config_shop_id',
            ]),
        },
    };
</script>

<style lang="scss">
    page {
        background-color: $pages !important;
    }
</style>
<style lang="scss" scoped>
    .Map {
        margin: 0 auto;
    }
    .Info {
        width: 710rpx;
        margin: 30rpx auto;
        background-color: #fff;
        padding: 30rpx 24rpx;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx;
        .list {
            display: flex;
            align-items: center;

            font-size: 32rpx;
            margin-top: 20rpx;
        }
        .list:first-child {
            margin-top: 0 !important;
        }
    }
    .toBtn {
        width: 500rpx;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 36rpx;
        margin: 70rpx auto 0;
        background-color: $color_d85;
        border-radius: 10rpx;
        letter-spacing: 4rpx;
    }
</style>
